<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="身份证号" prop="patiCode">
        <el-input
          v-model="queryParams.patiCode"
          placeholder="请输入身份证号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item>
        <!--触发单击事件，根据身份证号，查询患者-->
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">加载身份证号</el-button>
        <!--触发单击事件，输入完患者信息，新增患者-->
        <el-button type="warning" icon="el-icon-search" size="mini" @click="submitForm">加载患者信息</el-button>
      </el-form-item>
    </el-form>


    <!--查询或新增患者信息-->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="身份证号" prop="patiCode">
          <el-input v-model="form.patiCode" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="患者姓名" prop="patiName">
          <el-input v-model="form.patiName" placeholder="请输入患者姓名" />
        </el-form-item>
        <el-form-item label="患者电话" prop="patiPhone">
          <el-input v-model="form.patiPhone" placeholder="请输入患者电话" />
        </el-form-item>

        <el-form-item label="性别" prop="patiSex">
          <el-radio v-model="form.patiSex" label="男">男</el-radio>
          <el-radio v-model="form.patiSex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="出生日期" prop="patiBirthday">
          <el-date-picker v-model="form.patiBirthday" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>


        <el-form-item label="患者年龄" prop="patiAge">
          <el-input-number v-model="form.patiAge" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="地址信息" prop="patiAddress">
          <el-input v-model="form.patiAddress" placeholder="请输入地址信息" />
        </el-form-item>
      </el-form>
    </el-form>


    <!--挂号类型及挂号费-->
    <div >
      <el-button-group >
        <el-button @click="price1">门诊</el-button>
        <el-button @click="price2" >门诊+病历本</el-button>
        <el-button @click="price3" >急诊</el-button>
        <el-button @click="price4" >急诊+病历本</el-button>
        <span style="float:right;margin-right: 20px;font-size: 15px" >挂号费：{{ghprice}}
        <el-button icon="el-icon-search" style="margin-left:450px" type="danger"size="mini" @click="handleAdd">挂号收费</el-button>
        </span>
      </el-button-group>
    </div>

<!--新增挂号单对话框-->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="regForm" :rules="rules" label-width="80px">
        <el-form-item label="患者姓名" prop="patiName">
          <el-input v-model="regForm.patiName" placeholder="请输入患者姓名" />
        </el-form-item>
        <el-form-item label="患者身份证号" prop="patiCode">
        <el-input v-model="regForm.patiCode" placeholder="请输入患者身份证号" />
      </el-form-item>
        <el-form-item label="挂号科室" prop="regDepts">
          <el-input v-model="regForm.regDepts" placeholder="请输入挂号科室" />
        </el-form-item>
        <el-form-item label="接诊医生" prop="regDocter">
          <el-input v-model="regForm.regDocter" placeholder="请输入接诊医生" />
        </el-form-item>
        <el-form-item label="挂号类型" prop="regType">
          <el-input v-model="regForm.regType" placeholder="请输入挂号类型" />
        </el-form-item>
        <el-form-item label="挂号费用" prop="regPrice">
          <el-input v-model="regForm.regPrice" placeholder="请输入挂号费用" />
        </el-form-item>
        <el-form-item label="挂号状态" prop="regStatus">
          <el-input v-model="regForm.regStatus" placeholder="请输入挂号状态（未付费；已付费）" />
        </el-form-item>
        <el-form-item label="挂号时段" prop="regTime">
          <el-input v-model="regForm.regTime" placeholder="请输入挂号时段（上午；下午）" />
        </el-form-item>
        <el-form-item label="挂号时间" prop="regRdate">
          <el-date-picker type="datetime" v-model="regForm.regRdate" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="registerAdd">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
<!--查询科室及其挂号列表-->
    <el-form :model="regCs" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="所属部门" prop="regDepts">
        <el-input
          v-model="regCs.regDepts"
          placeholder="请输入所属部门"
          clearable
          size="small"
          @keyup.enter.native="reghandleQuery"
        />
      </el-form-item>
      <el-form-item label="挂号类型" prop="regType">
        <el-input
          v-model="regCs.regType"
          placeholder="请输入挂号类型"
          clearable
          size="small"
          @keyup.enter.native="reghandleQuery"
        />
      </el-form-item>
      <el-form-item label="挂号时段" prop="regTime">
        <el-input
          v-model="regCs.regTime"
          placeholder="请输入挂号时段"
          clearable
          size="small"
          @keyup.enter.native="reghandleQuery"
        />
      </el-form-item>
      <el-form-item label="挂号时间" prop="regRdate">
        <el-date-picker
          v-model="regCs.regRdate"
          placeholder="请输入挂号时间"
          clearable
          size="small"
          @keyup.enter.native="reghandleQuery">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="reghandleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table v-loading="loading" :data="regList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="科室ID" align="center" prop="regDeid" />
      <el-table-column label="科室名称" align="center" prop="regDepts" />
      <el-table-column label="流水编号" align="center" prop="regNum" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="regCs.pageNum"
      :limit.sync="regCs.pageSize"
      @pagination="regGetList"
    />


  </div>
</template>
<script>
import {listPost,addReg, getPost, delPost, addPost, updatePost, exportPost } from "@/api/kbjz_lss/mzgh";





export default {
  name: "Post",
  data() {
    return {

        //挂号单
        regForm:{},
        //挂号费
        ghprice:0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
        //挂号列表
        regList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
          patiCode: undefined,
      },
        //挂号单查询参数
        regCs: {
            pageNum: 1,
            pageSize: 10,
            regDepts: undefined,
            regType: undefined,
            regTime: undefined,
            regRdate: undefined
        },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
          patiCode: [
          { required: true, message: "身份证号不能为空", trigger: "blur" }
        ],
          patiName: [
          { required: true, message: "患者姓名不能为空", trigger: "blur" }
        ],
          patiPhone: [
          { required: true, message: "患者电话不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
  },
  methods: {

    /** 查询挂号单列表 */
    regGetList() {
      this.loading = true;
      console.log(this.regCs)
      listPost(this.regCs).then(response => {
        this.regList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
      /** 挂号搜索按钮操作 */
      reghandleQuery() {
          this.regCs.pageNum = 1;
          this.regGetList();
      },
    /*添加挂号表*/
      registerAdd(){
          addReg(this.regForm).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
          });
          this.regReset();
      },
    /*单击事件*/
      price1() {
          this.ghprice=6
      },
      price2() {
          this.ghprice=12
      },
      price3() {
          this.ghprice=20
      },
      price4() {
          this.ghprice=26
      },

    // 取消按钮
    cancel() {
      this.open = false;
      this.regReset();
    },
      //挂号表，表单重置
      regReset(){
      this.regForm={
          patiName:undefined,
          patiCode:undefined,
          regDepts:undefined,
          regDocter:undefined,
          regType:undefined,
          regPrice:undefined,
          regStatus:undefined,
          regTime:undefined,
          regRdate:undefined
      }
      },
    // 表单重置
    reset() {
      this.form = {
          patiCode: undefined,
          patiName: undefined,
          patiPhone: undefined,
          patiSex: undefined,
          patiBirthday: undefined,
          patiAge: undefined,
          patiAddress: undefined,
        postSort: 0,
        status: "0",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log(this.queryParams.patiCode)
        getPost(this.queryParams.patiCode).then(response => {
            this.form = response.data;
        });
    },
      /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
      // 多选框选中数据
      handleSelectionChange(selection) {
          this.ids = selection.map(item => item.postId)
          this.single = selection.length!=1
          this.multiple = !selection.length
      },
    /** 新增按钮操作 */
    handleAdd() {
      this.regReset();
        this.open = true;
        this.title = "添加挂号单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const postId = row.postId || this.ids
      getPost(postId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改岗位";
      });
    },
    /** 提交按钮 */
    submitForm: function() {

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.patiId != undefined) {
            updatePost(this.form).then(response => {
              this.msgSuccess("修改成功");
            });
          } else {
            addPost(this.form).then(response => {
              this.msgSuccess("新增成功");
            });
          }
        }
      });
        this.reset();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = row.postId || this.ids;
      this.$confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delPost(postIds);
        }).then(() => {
          this.msgSuccess("删除成功");
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有岗位数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportPost(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
    }
  }
};
</script>
